<template>
	<view id="container">
		<view style="padding-left:3rem;background-color: #76CDCD;border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;">问题列表</view>
		<scroll-view id="question-list-container" scroll-y="true" >
			<view class="question-item" v-for="item in questionList" v-bind:id="item" @click="handleQuestionItenClick(item)">
				<view>标题: {{item.title}}</view>
				<view>所属模块: {{item.moduleName}}</view>
			</view>
		</scroll-view>
		<button :disabled="buttonDisable" style="margin-top: 2px;" type="primary" @click="handleScrollLower">{{showMoreText}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questionList: [],
				queryForm: {
					current: 1,
					size: 13,
				},
				showMoreText: "查看更多",
				buttonDisable: false,
			}
		},
		created() {
			this.search()
		},
		methods: {
			search() {
				this.$api.questionPage(this.queryForm).then(res => {
					if (res.records.length === 0) {
						this.buttonDisable = true;
						this.showMoreText = "没有更多啦"
					}
					this.questionList = [
						...this.questionList,
						...res.records,
					]
				})
			},
			handleScrollLower() {
				console.log("触底");
				this.queryForm.current =  this.queryForm.current + 1;
				this.search();
			},
			handleQuestionItenClick(item) {
				uni.navigateTo({
					url: '../questionDetail/questionDetail?questionId=' + item.id,
				})
			}
		}
	}
</script>

<style>
	#container {
		width: 100%;
	}
	# question-list-container {
		width: 100%;
	}
	.question-item {
		pading-top: 10px;
		padding-bottom: 5px;
		padding-left: 3rem;
		margin-top: 5px;
		width: 100%;
/* 		border-bottom: 1px solid #09BB07;
		border-top: 1px solid #09BB07; */
		background-color: #9BDBDB;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
</style>
